<template>
  <view>
    <cu-custom :bgColor="'bg-' + theme.backgroundColor" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">我的收藏</block>
    </cu-custom>
    <scroll-view
      v-if="theme.showType != '2'"
      scroll-x
      class="bg-white nav fixed collection-types"
    >
      <view class="flex text-center">
        <view
          :class="
            'cu-item flex-sub ' +
            (index == tabCur ? 'cur text-' + theme.themeColor : '')
          "
          v-for="(item, index) in collectType"
          :key="index"
          @tap="tabSelect"
          :data-index="index"
          :data-key="item.key"
          >{{ item.value }}</view
        >
      </view>
    </scroll-view>
    <view
      class="cu-list menu-avatar goods-list"
      :style="!(theme.showType != '2') ? 'margin-top:0px;' : ''"
      v-if="tabCur == 0"
    >
      <view v-if="!userCollect.length">
        <Empty></Empty>
      </view>
      <navigator
        class="goods-item"
        hover-class="none"
        :url="'/pages/goods/goods-detail/index?id=' + item.goodsSpu.id"
        :class="
          'cu-item ' + (modalName == 'move-box-' + index ? 'move-cur' : '')
        "
        v-for="(item, index) in userCollect"
        :key="index"
        @touchstart="ListTouchStartFun"
        @touchmove="ListTouchMove"
        @touchend="ListTouchEnd"
        :data-target="'move-box-' + index"
      >
        <view
          class="cu-avatar image-box"
          :style="'background-image:url(' + item.goodsSpu.picUrls[0] + ');'"
        ></view>
        <view class="padding-right-sm goods-detail">
          <view class="text-df overflow-2">{{ item.goodsSpu.name }}</view>
          <view class="text-gray text-sm overflow-1">{{
            item.goodsSpu.sellPoint
          }}</view>
          <view class="text-gray text-sm">已售{{ item.goodsSpu.saleNum }}</view>
          <view class="flex justify-between align-center">
            <view class="text-price text-xl text-bold text-red">{{
              item.goodsSpu.priceDown
            }}</view>
            <view
              class="cu-btn round shadow-blur check-details margin-right-sm"
              :class="'bg-' + theme.themeColor"
              >查看详情</view
            >
          </view>
        </view>
        <view class="move" @tap.stop>
          <view class="bg-red" @tap="userCollectDel" :data-index="index"
            >删除</view
          >
        </view>
      </navigator>
    </view>
    <view
      v-if="tabCur == 1"
      class="cu-list menu-avatar goods-list"
      :style="!(theme.showType != '2') ? 'margin-top:0px;' : ''"
    >
	<view v-if="!userCollect.length">
        <Empty></Empty>
      </view>
      <navigator
        class="store-item"
        hover-class="none"
        :url="'/pages/shop/shop-detail/index?id=' + item.shopInfo.id"
        :class="
          'cu-item ' + (modalName == 'move-box-' + index ? 'move-cur' : '')
        "
        v-for="(item, index) in userCollect"
        :key="index"
        @touchstart="ListTouchStartFun"
        @touchmove="ListTouchMove"
        @touchend="ListTouchEnd"
        :data-target="'move-box-' + index"
      >
        <view
          class="cu-avatar image-box"
          :style="'background-image:url(' + item.shopInfo.imgUrl + ');'"
        ></view>
        <view class="padding-right-sm store-detail">
          <view class="text-df overflow-2">{{ item.shopInfo.name }}</view>
          <view class="text-sm text-gray overflow-2 margin-top-xs"
            ><text class="cuIcon-locationfill"></text
            ><text class="margin-left-xs">{{
              item.shopInfo.address
            }}</text></view
          >
          <view class="flex justify-between align-center margin-top-sm">
            <view class="text-sm text-gray margin-top-xs"
              ><text class="cuIcon-mobilefill"></text
              ><text class="margin-left-xs">{{
                item.shopInfo.phone
              }}</text></view
            >
            <view
              class="cu-btn round shadow-blur check-details margin-right-sm"
              :class="'bg-' + theme.themeColor"
              >进入店铺</view
            >
          </view>
        </view>
        <view class="move" @tap.stop>
          <view class="bg-red" @tap="userCollectDel" :data-index="index"
            >删除</view
          >
        </view>
      </navigator>
    </view>
    <view v-if="userCollect.length" :class="'cu-load bg-gray ' + (loadmore ? 'loading' : 'over')"></view>
  </view>
</template>

<script>
const util = require("utils/util.js");
const app = getApp();
import api from "utils/api";
export default {
  data() {
    return {
      CustomBar: this.CustomBar,
      theme: app.globalData.theme, //全局颜色变量
      collectType: [
        {
          value: "商品",
          key: "1",
        },
        {
          value: "店铺",
          key: "2",
        },
      ],
      tabCur: 0,
      page: {
        searchCount: false,
        current: 1,
        size: 15,
        ascs: "",
        //升序字段
        descs: "create_time",
      },
      parameter: {
        type: "1",
      },
      loadmore: true,
      userCollect: [],
      ListTouchStart: "",
      ListTouchDirection: "",
      modalName: "",
    };
  },

  props: {},

  onLoad(options) {
    // 保存别人分享来的 userCode
    util.saveSharerUserCode(options);
    app.initPage().then((res) => {
      this.userCollectPage();
    });
  },

  onShow(options) {},

  onReachBottom() {
    if (this.loadmore) {
      this.page.current = this.page.current + 1;
      this.userCollectPage();
    }
  },

  methods: {
    tabSelect(e) {
      let dataset = e.currentTarget.dataset;
      if (dataset.index != this.tabCur) {
        this.tabCur = dataset.index;
        this.parameter.type = dataset.key;
        this.refresh();
      }
    },
    refresh() {
      this.loadmore = true;
      this.userCollect = [];
      this.page.current = 1;
      this.userCollectPage();
    },
    userCollectPage() {
      api
        .userCollectPage(
          Object.assign({}, this.page, util.filterForm(this.parameter))
        )
        .then((res) => {
          let userCollect = res.data.records;
          this.userCollect = [...this.userCollect, ...userCollect];
          if (userCollect.length < this.page.size) {
            this.loadmore = false;
          }
        });
    },

    // ListTouch触摸开始
    ListTouchStartFun(e) {
      this.ListTouchStart = e.touches[0].pageX;
    },

    // ListTouch计算方向
    ListTouchMove(e) {
      this.ListTouchDirection =
        e.touches[0].pageX - this.ListTouchStart > 0 ? "right" : "left";
    },

    // ListTouch计算滚动
    ListTouchEnd(e) {
      if (this.ListTouchDirection == "left") {
        this.modalName = e.currentTarget.dataset.target;
      } else {
        this.modalName = null;
      }
      this.ListTouchDirection = null;
    },

    userCollectDel(e) {
      let that = this;
      let index = e.target.dataset.index;
      let userCollect = this.userCollect;
      uni.showModal({
        content: "确定删除收藏吗？",
        cancelText: "我再想想",
        confirmColor: "#ff0000",

        success(res) {
          if (res.confirm) {
            api.userCollectDel(userCollect[index].id).then((res) => {
              userCollect.splice(index, 1);
              that.userCollect = userCollect;
            });
          }
        },
      });
    },
  },
};
</script>
<style>
.collection-types {
  top: unset !important;
}

.goods-list {
  margin-top: 90rpx;
}

.goods-item {
  height: 260rpx !important;
}

.store-item {
  height: 260rpx !important;
}

.image-box {
  width: 200rpx;
  height: 200rpx;
}

.goods-detail {
  width: 480rpx;
}

.store-detail {
  width: 480rpx;
}
</style>
